<template>
  <div class="about">
      <div class="top">
    <div class="head clear">
        <div class="head_left" @click="$router.go(-1)"><img src="../../assets/image/返回黑@2x.png" alt="" style="font-weight:bold;color: #1DA4F2;">返回</div>

        <van-search v-model="value" show-action placeholder="请输入康复项目" @search="onSearch($event)" @blur="onSearch" class="input">
  <template #action>

  </template>
</van-search>
<div @click="onSearch" style="font-size:15px;font-weight:bold;color:#1da4f2;">搜索</div>
    </div>
    </div>
    <div class="main1">

    <div class="main clear">
        <div class="main_meum" v-for="(item,k) in show" :key="k" @click="chooes(k)">
            <span>{{item.text}}</span>
          <!-- <img src="../../assets/image/已选择@2x.png" alt="">  -->
        </div>

    </div></div>
    <div class="button">
<button @click="back()">确定</button>
    </div>

  </div>
</template>
<script>
import {listServiceXiangmu} from '../../apiCanJi/apiCanji'

export default {
  data () {
    return {
      show: [],
      show1: [],
      ss: '',
      value: ''
    }
  },
  methods: {
    onSearch (e) {
      if (this.value === '') {
        let shujuArr = []
        listServiceXiangmu({keywords: ''}).then(res => {
          for (let i = 0; i < res.length; i++) {
            let shuju = {}
            shuju.text = res[i].servicexiangmuname
            shuju.id = res[i].id
            shuju.xiu = false
            shujuArr.push(shuju)
          }
          this.show = shujuArr
          console.log(this.show)
        })
      } else {
        let shujuArr = []
        listServiceXiangmu({keywords: this.value}).then(res => {
          for (let i = 0; i < res.length; i++) {
            let shuju = {}
            shuju.text = res[i].servicexiangmuname
            shuju.id = res[i].id
            shuju.xiu = false
            shujuArr.push(shuju)
          }
          this.show = shujuArr
          console.log(this.show)
        })
      }
    },

    chooes (k) {
      var oo = document.getElementsByClassName('main_meum')

      this.show[k].xiu = !this.show[k].xiu
      if (this.show[k].xiu) {
        oo[k].style.background = 'linear-gradient(90deg, #1DA3F1, #1DC7F1)'
        oo[k].style.color = '#fff'
      } else {
        oo[k].style.background = '#fff'
        oo[k].style.color = '#333'
      }
      // console.log(this.show);
    },
    back () {
      this.$router.go(-1)
      this.show.forEach(item => {
        item.xiu ? this.show1.push(item) : ''
      })
      var str = JSON.stringify(this.show1)
      localStorage.msg = str
    },
    aa () {
      let shujuArr = []
      listServiceXiangmu({keywords: ''}).then(res => {
        for (let i = 0; i < res.length; i++) {
          let shuju = {}
          shuju.text = res[i].servicexiangmuname
          shuju.id = res[i].id
          shuju.xiu = false
          shujuArr.push(shuju)
        }
        this.show = shujuArr
        console.log(this.show)
      })
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#FAF9FE'
  },
  created () {
    this.aa()
    document.title = '康复服务记录项目选择'
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.about{
    position: absolute;
}
.top{
    width: 100%;
    height: 44px;
    background-color: #fff;
    position: fixed;
    top: 0px;
    z-index: 10;
}
.head{
    width: 92%;
    height: 44px;
    margin: 0px auto;
    display: flex;
    justify-content:space-between;
    align-items:center;
    font-size: 15px;
    font-weight: bold;

}

.head_left{
    color: #1DA4F2;
}
.head_right{
    margin-top: -17px;
    width: 250px;
}
.head_right{
    width: 235px;
    height: 24px;
    border-radius: 15px;
    padding-left: 15px;

background: #FAF9FE;
border: none;
font-size: 15px;
}
.head_left img{
    width: 7px;
    height: 13px;
    margin-right: 5px;

}
/deep/.van-search--show-action{
    padding: 0px;

}
/deep/.van-search__content{
    width: 200px;
    border-radius: 15px;
    margin-left: 15px;
}
::placeholder{
    padding: 108px;
    color: #999999;
    font-size: 15px;
}
.ss{
    width: 15px;
    height: 15px;
    position: absolute;
    left: 96px;
    top: 34px;
    display: block;
}
.main1{
    width: 100vw;
    /* display: flex;
    justify-content:space-between; */
}
.main{
    width: 92vw;
    margin: 0px auto;
    margin-top: 49px;
    margin-bottom: 120px;
}
.input{

}
.main_meum{
    width: 45vw;
    height: 60px;
    background-color: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    float: left;
    text-align: center;
    line-height: 60px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333;
    position: relative;
}
.main_meum:nth-of-type(2n){
    margin-right: 0px;
}
.main_meum img{
    width: 17px;
    height: 17px;
    margin-left: 20px;
    position: absolute;
    top: 23px;
    /* z-index: -1; */
}
button{
width: 90%;
height: 44px;
background: linear-gradient(90deg, #1DA3F1, #1DC7F1);
border-radius: 22px;

margin: 0px auto;
border: none;
color: #fff;
font-size: 15px;
}
.date{
   color: #f00;
}
.button{
    width: 100%;
    height: 66px;
    background-color: #fff;
    position: fixed;
    bottom: 50px;
    display: flex;
    justify-content:space-between;
    align-items:center;
}

</style>
